<template>
    <div class="article-cate">
        <!-- 头部 -->
        <div class="cate-header">
            <h3>文章分类</h3>
            <el-button @click="showDialog = true">添加分类</el-button>
        </div>
        <!-- 内容 -->
        <div class="cate-main">
            <el-table
            border
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="id"
                label="序号"
                width="130">
            </el-table-column>
            <el-table-column
                prop="cate_name"
                label="项目名称"
                width="420">
            </el-table-column>
            <el-table-column
                prop="cate_alias"
                label="分类别名">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="160">
                <template slot-scope="scope">
                    <el-button @click="editDialog(scope.row.id)"  size="small">修改</el-button>
                    <!-- <el-button  size="small" class="delBtn" @click="delBtn(scope.row.id)">删除</el-button> -->
                    <el-popconfirm
                      confirm-button-text='确认删除'
                      cancel-button-text='取消'
                      icon="el-icon-info"
                      icon-color="red"
                      title="您确定删除这段文章吗？"
                      @confirm="delBtn(scope.row.id)"
                    >
                      <el-button slot="reference" class="delBtn">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
            </el-table>
        </div>

        <!-- 添加窗口 -->
        <el-dialog title="添加分类" :visible.sync="showDialog" class="cate-dialog">
            <el-form :model="dialogData" :rules="dialogRules" ref="dialogForm">
                <el-form-item label="分类名称" label-width="80px" prop="cate_name">
                <el-input v-model="dialogData.cate_name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="分类别名" label-width="80px" prop="cate_alias">
                    <el-input v-model="dialogData.cate_alias" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelBtn">取 消</el-button>
                <el-button type="primary" @click="okBtn">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import { getArticleSort, addArticleSort, getSortDetail, editSortDetail, delSort } from '@/api/article'
export default {
  // data
  data () {
    return {
      tableData: [],
      showDialog: false, // 显示弹框

      dialogData: {
        cate_name: null,
        cate_alias: null,
        id: null
      },
      dialogRules: {
        cate_name: [{ required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度为1~10，不能有空格', trigger: 'blur' }],
        cate_alias: [{ required: true, message: '请输入分类别名', trigger: 'blur' },
          { pattern: /^\w{1,15}$/, message: '字母数字长度为1~15', trigger: 'blur' }
        ]
      }
    }
  },
  // created
  created () {
    this.getSort()
  },
  // method
  methods: {

    // 渲染文章
    async getSort () {
      const res = await getArticleSort()
      console.log(res.data)
      this.tableData = res.data
    },
    // 确认按钮
    okBtn () {
      // 编辑
      if (this.dialogData.id) {
        console.log('编辑')
        this.$refs.dialogForm.validate(async (isOK) => {
          if (isOK) {
            await editSortDetail(this.dialogData)
            this.$message.success('更改文章分类成功')
            // 渲染
            this.getSort()
            // 清空且关闭弹层
            this.cancelBtn()
          }
        })
      } else {
        // 新增
        this.$refs.dialogForm.validate(async (isOK) => {
          console.log('新增')
          if (isOK) {
            await addArticleSort(this.dialogData)
            this.$message.success('添加文章分类成功')
            // 渲染
            this.getSort()
            // 清空且关闭弹层
            this.cancelBtn()
          }
        })
      }
    },
    async delBtn (delId) {
      // console.log(delId)
      await delSort(delId)
      this.$message.success('删除成功')
      // 渲染
      this.getSort()
    },
    // 取消按钮
    cancelBtn () {
      this.$refs.dialogForm.resetFields()
      this.dialogData = {
        cate_name: null,
        cate_alias: null,
        id: null
      }
      this.showDialog = false
    },
    // 编辑功能弹窗
    async editDialog (editId) {
      // 弹窗   api
      const { data } = await getSortDetail(editId)
      console.log(data)
      this.dialogData.cate_name = data.cate_name
      this.dialogData.cate_alias = data.cate_alias
      this.dialogData.id = editId
      this.showDialog = true
    }
  }
}
</script>
<style lang="less" scoped>
    .article-cate{
        // position: relative;
        padding: 30px;
        width: 100%;
        height: 100%;
        // 头部样式
        .cate-header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0px 30px;

            height: 70px;
            background: #FFFFFF;
            border-radius: 4px 4px 0px 0px;

            h3{
                font-size: 16px;
                color: #131523;
                font-weight: 700;
            }
            .el-button{
                background: #4F81FF;
                border-radius: 3px;

                font-size: 14px;
                color: rgba(255,255,255,0.90);
                text-align: center;
                line-height: 14px;
                font-weight: 400;
            }
        }

        // 内容样式
        .cate-main{
            padding: 30px;

            background-color: #FFFFFF;
            .el-table{
                color: #131523;
                .el-button{
                    width: 60px;
                    height: 30px;
                    background: #4F81FF;
                    border-radius: 4px;
                    color: white;
                    text-align: center;
                }
                .delBtn{
                    text-align: center;
                    background: #F46C6C;
                    border-radius: 4px;
                    color: white;
                }
            }

        }

        //  弹框样式
        .cate-dialog{
            // position: absolute;
            // margin: 50px auto;
            // width: 1000px;
            // height: 600px;
            .el-input {
                width: 280px;
            }
        }
    }
</style>
